// src/directives/verify.js

// 存储错误信息的 WeakMap，避免污染 DOM
const errorMessages = new WeakMap();

// 校验规则
const rules = {
  required(value) {
    if (!value || value.trim() === '') {
      return '此项为必填项';
    }
    return true;
  },
  phone(value) {
    if (!value) return '手机号不能为空';
    if (!/^\d+$/.test(value)) return '手机号必须为数字';
    if (value.length !== 11) return '手机号必须为11位';
    return true;
  },
  password(value) {
    if (!value) return '密码不能为空';
    if (value.length < 6) return '密码长度不能少于6位';
    if (value.length > 20) return '密码长度不能超过20位';
    return true;
  },
};

// 获取绑定元素的实际 input 元素
function getInputElement(el) {
  return el.tagName === 'INPUT' ? el : el.querySelector('input');
}

// 显示错误信息
function showError(el, message) {
  // 如果已有错误提示，先移除
  const oldTip = el.querySelector('.verify-error-tip');
  if (oldTip) {
    oldTip.remove();
  }

  // 创建提示元素
  const tip = document.createElement('div');
  tip.className = 'verify-error-tip';
  tip.style.cssText = `
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #fff;
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
  z-index: 1000;
  min-width: max-content;
`;
  tip.textContent = message;

  // 插入到 input 后面
  el.appendChild(tip);

  // 记录错误信息
  errorMessages.set(el, message);
}

// 隐藏错误信息
function hideError(el) {
  const oldTip = el.querySelector('.verify-error-tip');
  if (oldTip) {
    oldTip.remove();
  }
  errorMessages.delete(el);
}

// 校验函数
function validate(el, binding) {
  const input = getInputElement(el);
  if (!input) return;

  const value = input.value;
  const ruleName = binding.value;

  if (!ruleName) return;

  const rule = rules[ruleName];
  if (!rule) {
    console.warn(`[v-verify] 未找到校验规则: ${ruleName}`);
    return;
  }

  const result = rule(value);
  if (result === true) {
    hideError(el);
  } else {
    showError(el, result);
  }
}

export default {
  // 指令绑定到元素时
  bind(el, binding) {
    const input = getInputElement(el);
    if (!input) {
      console.error('[v-verify] 未找到 input 元素');
      return;
    }

    // 失焦时触发校验
    input.addEventListener('blur', () => {
      validate(el, binding);
    });

    // 可选：输入时清除错误（体验优化）
    input.addEventListener('input', () => {
      if (errorMessages.has(el)) {
        hideError(el);
      }
    });
  },
  // 解绑时
  unbind(el) {
    const input = getInputElement(el);
    if (input) {
      input.removeEventListener('blur', validate);
      input.removeEventListener('input', hideError);
    }
    hideError(el);
  },
};
